<template>
  <div class="order">
    <el-card>
      <!-- 搜索组件 -->
      <!-- <search-form :items="formItems" :params="params" :on-submit="onSearch" :btn-loading="loading" /> -->

      <!-- 左上角按钮 -->
      <!-- <div class="table-left-top">
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="addPop">新增店铺</el-button>
      </div> -->

      <!-- 表格区域 -->
      <div class="table-body">
        <el-table ref="listData" style="margin-top: 10px" :data="listData" v-loading="loading">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="storeName" label="店铺名称" />
          <el-table-column prop="mobile" label="店铺手机号" />
          <!-- <el-table-column label="店铺类型">
            <template slot-scope="scope">
              {{scope.row.type == '0'?'先付':'后付'}}
            </template>
          </el-table-column> -->
          <el-table-column prop="status" label="店铺状态">
            <template slot-scope="scope">
              {{scope.row.status == 'use'?'运营中':'歇业中'}}
            </template>
          </el-table-column>
          <!-- <el-table-column label="附加费">
            <template slot-scope="scope">
              <p v-for="(item,index) in scope.row.orderSurchargeList" :key="index">{{item.name}}:{{item.amount}}</p>
            </template>
          </el-table-column> -->
          <el-table-column prop="address" label="操作" width="80">
            <template slot-scope="scope">
              <!-- <el-button size="mini" type="text" @click="goRoomList(scope.row)">房间管理</el-button>
              <el-button size="mini" type="text" @click="roomType(scope.row)">房间类型</el-button> -->
              <el-button size="mini" type="text" @click="editPop(scope.row)">编辑</el-button>
              <!-- <el-button size="mini" type="text" @click="fjfPop(scope.row)">附加费</el-button> -->
              <!-- <el-button size="mini" type="text" @click="delBtn(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <!-- 分页 -->
      <div class="page_box" v-show="total>0">
        <pagination
          :page.sync="params.current"
          :limit.sync="params.size"
          @pagination="getList"
          :total="total"
        />
      </div>

      <!-- 编辑或删除页 -->
      <el-dialog
        v-if="dialog"
        :title="mdl.storeId ? '编辑店铺' : '新增店铺'"
        :visible.sync="dialog"
        width="800px"
      >
        <form-model :mdl="mdl" :parent-id="parentId" :handle-close-drawer="handleCloseDialog" @getList="getList" />
      </el-dialog>

      <!-- 房间类型 -->
      <el-dialog
        v-if="dialogType"
        :title="mdl.storeId ? '编辑类型' : '新增类型'"
        :visible.sync="dialog"
        width="1000px"
      >
        <form-model :mdl="mdl" :parent-id="parentId" :handle-close-drawer="handleCloseDialog" @getList="getList" />
      </el-dialog>

      <!-- 附加费 -->
      <el-dialog
        title="附加费"
        :visible.sync="fjf_dialog"
        width="500px"
      >
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="选择附加费">
            <el-select multiple v-model="form.region" placeholder="请选择附加费">
              <el-option v-for="(item,index) in fjfList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fjs_submit">提交</el-button>
            <el-button @click="fjf_dialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import SearchForm from '@/components/SearchForm'
import FormModel from './FormModel.vue'
import { pageStore, delStore,getOrderSurchargeList,bindOrderSurcharge } from '@/api/user'

export default {
  name: 'StoreList',
  components: { SearchForm, FormModel},
  data() {
    return {
      params: {
        current: 1,
        size: 10
      },
      loading: false,
      total:0,
      listData: [],
      total: 0,
      mdl: {},
      parentId: 0,
      dialog: false, // 新增、编辑弹框
      dialogType:false,
      fjf_dialog:false,
      form:{
        region:[]
      },
      fjfList:[],
      stordId:'',
    }
  },
  computed: {
    formItems() {
      // 状态
      // const statusOptions = [
      //   { label: '丢安排', value: 0 },
      //   { label: '嗡嗡嗡', value: 1 }
      // ]

      // 构建搜索表单
      return [
        { title: '店铺名字', type: 'input', key: 'storeName', maxlength: 30 },
        // { title: '啊啊', type: 'select', key: 'status', options: statusOptions },
        // { title: '啊啊', type: 'date-range', key: 'created_at' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {

    // 附加费
    fjfPop(e){
      console.log(e)
      this.stordId = e.storeId
      getOrderSurchargeList().then(res=>{
        console.log(res)
        if (res.statusCode === '00000') {
          this.fjf_dialog = true
          this.fjfList = res.data
          if(e.orderSurchargeList.length){
            e.orderSurchargeList.map(item=>{
              this.form.region.push(item.id)
            })
          }
          console.log(this.form.region)
        }
      })
    },

    // 绑定附加费
    fjs_submit(){
      let data = {
        ids:[this.form.region],
        storeId:this.stordId
      }
      console.log(data)
      bindOrderSurcharge(data).then(res=>{
        if (res.statusCode === '00000') {
          this.$message({
            message: '成功',
            type: 'success'
          });
          this.fjf_dialog = false
          this.getList()
        }
      })
    },

    // 房间列表
    goRoomList(row) {
      this.$router.push({ path: `/storeAdmin/room?roomKey=${row.storeId}` })
    },
    //房间类型
    roomType(row){
      this.$router.push({ path: `/storeAdmin/roomType?storeId=${row.storeId}` })
    },
    // 删除店铺
    delBtn(row) {
      const that = this
      that.$confirm('确定删除该店铺?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delStore({
          storeId: row.storeId
        }).then(res => {
          if (res.statusCode === '00000') {
            that.getList()
          }
        })
      }).catch(() => {
                
      });
    },
    // 获取列表
    getList() {
      this.loading = true
      pageStore(this.params).then(res => {
        if (res.statusCode === '00000') {
          setTimeout(() => {
            this.loading = false
            this.listData = res.data.records
            this.total = res.data.total
          }, 300);
        }
      })
    },

    // 搜索按钮
    onSearch() {
      console.log(this.params)
      this.params
      this.getList()
    },

    // 新增-弹窗
    addPop() {
      this.dialog = true
      this.mdl = {
        type:0
      }
    },

    // 修改-弹窗
    editPop(item) {
      console.log(item)
      this.mdl = Object.assign({}, item)
      if(this.mdl.status == 'use'){
        this.mdl.status = true
      }else{
        this.mdl.status = false
      }
      this.dialog = true
    },

    // 关闭dialog方法
    handleCloseDialog() {
      this.dialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  margin: 20px;
}
</style>
